<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 5</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>

  //生命周期函数： 在某一时刻会自动执行得函数
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },

    // 在实列生成之前会自动执行得函数
    beforeCreate(){
      console.log('beforeCreate')
    },

    // 在实列生成之后会自动执行得函数
    created(){
      console.log('created')
    },

    // 在组件内容被渲染到页面之前 立即自动执行得函数
    beforeMount(){
      console.log('beforeMount')
    },

    // 在组件内容被渲染到页面之后自动执行得函数
    mounted(){
      console.log('mounted')
    },

    // 当 data 中数据发生变化得时候自动执行得函数
    // 当数据发生变化时会立即自动执行的函数
    beforeUpdate(){
      console.log('beforeUpdate')
    },


    // 当data 中得数据发生变化，同时页面完成更新后，会自动执行的函数
    // 当数据发生变化，页面重新渲染后，会自动执行的函数
    updated(){
      console.log('updated')
    },

    // 当vue应用失效时，自动执行的函数
    beforeUnmount(){
      console.log('beforeUnmount')
    },

    // 当vue 应用失效时，并且dom 完全销毁之后， 自动执行的函数
    unmounted(){
      console.log('unmounted')
    },


    template: "<div>{{message}}</div>"
  });
  // vm 代表的就是 Vue 应用的根组件
  const vm = app.mount('#root');
</script>
</html>